<template>
    <div>
        <h1>1 Button Using Details</h1>
        <h2>1.1 Create Simple Button</h2>
        <ol>
            <li>所有的按钮标签都是以el-button开头的</li>
            <li>所有按钮的属性都写在按钮标签上
                <a target="_blank"
                    href="https://element-plus.sxtxhy.com/zh-CN/component/button.html#button-attributes">网页</a>
            </li>
            </br>
            <el-row>
                <el-button size="mini" plain type="primary">mini ex</el-button>
                <el-button size="small" plain type="primary">small ex</el-button>
                <el-button size="medium" plain type="primary">medium ex</el-button>
                <el-button size="large" plain type="primary">large ex</el-button>
                <el-button size="default" circle type="success" icon="el-icon-chat-round"></el-button>
                <el-button size="default" loading type="info">loading</el-button>
                <el-button size="default" disabled type="danger">forbidden</el-button>
            </el-row>
            </br>
        </ol>
        <h2>1.2 Create Button Group</h2>
        <ol>
            <li>在按钮组中的button将会距离更近</li>
            <li>标签名称为 el-button-group</li>
        </br>
            <el-row>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-arrow-left">prev page</el-button>
                    <el-button type="primary">next page<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
            </el-row>
        </ol>

    </div>
</template>

<script>
export default {
    name: "ButtonDetail"
}
</script>

<style scoped></style>